import React, { useState } from 'react';

import styles from './useRef.css';
import { Input } from 'antd';

/**
 * 自己实现一遍 react 内置的 useRef hook
 * 返回 callback.current 保存当前的值
 * 利用 useState 永远保存对同一个 callback 的稳定引用，但是 state 永远不改变
 * @param initialValue
 * @returns: 返回是一个设置 ref object .current 的回调函数，用于记忆一个值
 */
function useRef(initialValue?: any) {
  const [callback] = useState(() => {
    const cb = (value: any) => {
      cb.current = value;
    };
    cb.current = initialValue;
    return cb;
  });
  return callback;
}

export default function() {
  const elInput = useRef();
  const autoInput = () => {
    elInput.current.value = 'autofilled';
    elInput.current.focus();
  };
  return (
    <div className={styles.normal}>
      <h1>Page useRef</h1>
      <input ref={elInput} />
      <button onClick={() => autoInput()}>click</button>
    </div>
  );
}
